<template>
    <div>
        <HeaderTop @changeSubNav="changeSubNav"></HeaderTop>
        <SubNav v-if="currentRoute.includes('/discover')"></SubNav>
        <router-view></router-view>
        <FooterBottom v-if="!currentRoute.includes('/my')"></FooterBottom>
        <BackTop></BackTop>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup>
import { RouterView } from 'vue-router';
import HeaderTop from './components/HeaderTop.vue';
import Discover from './views/Discover/index.vue';
import SubNav from './components/SubNav.vue';
import FooterBottom from './components/FooterBottom.vue';
import {useRouter, useRoute} from 'vue-router';
import BackTop from './components/BackTop.vue';
import BottomBar from './components/BottomBar.vue';
import { ref , onMounted} from "vue";
import { useMusicStore } from './stores/music';


const route = useRoute();
const router = useRouter();

let currentRoute = ref('');
router.isReady().then(()=>{
     currentRoute.value = route.path;
})


const changeSubNav = (routeParam) =>{
    currentRoute.value = routeParam;
}





</script>

<style lang="scss">
</style>